<template>
  <!-- <div>接口地址 :http://ceshi13.dishait.cn/admin/</div> -->
  <el-row class="content">
    <div class="flex content">
      <el-col class="left flex justify-center items-center flex-col bg-indigo-500" :lg="16">
        <div class="text-left">
          <h1 class="text-light-50 text-4xl font-bold">欢迎光临</h1>
          <p class="text-light-50 pt-5">Vue3实战商城后台管理系统开发</p>
        </div>
      </el-col>
      <el-col class="right flex justify-center items-center flex-col bg-light-200" :lg="8">
        <h1 class="text-3xl font-bold">欢迎回来</h1>
        <div class="flex items-center justify-center space-x-2 mt-5 mb-8">
          <span class="h-px w-16 bg-gray-200"></span>
          <span class="text-gray-300 font-normal">账号密码登录</span>
          <span class="h-px w-16 bg-gray-200"></span>
        </div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" :size="formSize" status-icon>
          <el-form-item prop="username">
            <el-input v-model="ruleForm.username" :prefix-icon="User" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="ruleForm.password" :prefix-icon="Lock" placeholder="请输入密码" />
          </el-form-item>
          <el-form-item>
            <el-button class="text-light-50 w-80" type="primary" @click="loginClick">登录</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </div>
  </el-row>
</template>

<script setup>
import { Lock, User } from "@element-plus/icons-vue";
import { ref, reactive, onMounted } from "vue";
import { Login } from "@/api/user";
import { storeToRefs } from "pinia";
import { user } from "../store/user";
import { setToken, getToken } from "@/utils/auth";
import { useRouter } from "vue-router";
import { Toast } from "@/utils/utils";
// 状态管理
const store = user();
let { userInfo } = storeToRefs(store);

// 路由
let router = useRouter();

const formSize = ref("default");
const ruleFormRef = ref();
const ruleForm = reactive({
  username: "admin",
  password: "admin",
});

const rules = reactive({
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 5, message: "请输入5位以上的用户名", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 5, message: "请输入5位以上的密码", trigger: "blur" },
  ],
});
// 登录方法
const loginClick = async () => {
  if (!ruleFormRef) return;
  // 检验输入框
  await ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      let res = await Login(ruleForm);
      if (res.status === 200) {
        // 请求个人信息
        store.getInfo()
        store.setToken(res.data.token);
        setToken(res.data.token);
        Toast("登录成功");
        router.push("/");
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<style>
* {
  margin: 0px;
  padding: 0px;
}

.content {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.el-form-item__content {
  margin: 0 !important;
}
</style>